<template>
  <div class="container">
    <div id="videoPopup"></div>
  </div>
</template>

<script>
import Player from 'xgplayer';
import 'xgplayer/dist/index.min.css';

const _FILE = 'src/src/components/common/IntroVideo.vue';

export default {
  data() {
    return {
      isVideoError: false,
    };
  },
  props: {
    videoUrl: {
      type: String,
      default: '',
    },
  },
  mounted() {
    this.initPlayer();
  },
  methods: {
    /**
     * 初始化 视频播放
     */
    initPlayer() {
      this.player = new Player({
        lang: 'zh',
        id: 'videoPopup',
        url: this.videoUrl,
        height: '100%',
        width: '100%',
        ignores: ['volume', 'playbackrate'],
        fullscreen: {
          useScreenOrientation: true,
        },
        autoplay: true,
      });
      this.player.on('error', this.errorHandler);
    },

    /**
     * 视频播放异常监听
     */
    errorHandler() {
      _t.errorReport({
        category: 'js',
        name: '视频播放异常',
        message: `videoUrl: ${this.videoUrl}`,
        stack: `${_FILE}-errorHandler`,
      });
    },
  },
  beforeDestroy() {
    this.player?.off('error', this.errorHandler);
    this.player?.destroy();
    this.player = null;
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  #videoPopup {
    width: 100%;
    height: 80% !important;
    margin-top: 10% !important;
    /deep/ .xgplayer-controls {
      .xg-icon-play,
      .xg-icon-pause {
        width: 0.5rem !important;
      }
      .xgplayer-time,
      .icon-text {
        font-size: 0.26rem !important;
      }
      .icon-text {
        font-weight: bold;
      }
      .xgplayer-progress-outer {
        height: 0.09rem !important;
      }
      .xg-get-fullscreen,
      .xg-exit-fullscreen {
        width: 0.5rem !important;
      }
    }
  }
}
</style>
